<script setup>
import AddUserPopover from "@/components/addUserPopover/index.vue";
// import AddTimePopover from '@/components/addTimePopover'
// import Markdown from "@/components/markdown/index.vue";
import {createApp, defineAsyncComponent, nextTick, reactive, ref, watch} from "vue";
import {Calendar, CircleCheck, Clock, EditPen, Plus, Remove} from "@element-plus/icons-vue";
import api from "@/api";
import tool from "@/utils/tool";
import {ElMessage, ElMessageBox} from "element-plus";
import moment from "moment/moment";
import TaskDetails from '@/views/task/details.vue'
import AddTaskDialog from "@/components/addTaskDialog/index.vue";
import taskHook from "@/hooks/taskHook";
import {useRoute} from "vue-router";


const app = createApp({})
app.component({
	TaskDetails
})

const {
	taskStatusList,
	selectPriorityList
} = taskHook()

const scEditor = defineAsyncComponent(() => import('@/components/scEditor/index.vue'));


const props = defineProps({
	showDrawer: Boolean,
	id: String,
	noneInfo: Boolean, /* 隐藏基本信息，只显示进展*/
	appendToBody: Boolean, /* 是否嵌套 */
	flexColumn: Boolean, /* 垂直排列 */
	noneChildInfo: Boolean, /* 隐藏子元素相关信息*/
	noneCommentInput: Boolean /* 隐藏进展评价输入框 */
})

const isExamineDetail = ref()
isExamineDetail.value = tool.data.get("USER_INFO").reserve1;

const drawer = ref(false)
const commentText = ref('')
const commentList = ref([])

watch(() => props.showDrawer, (props_showDrawer_n) => {
	drawer.value = props_showDrawer_n
	commentText.value = ''
	commentList.value = []
}, {immediate: true})

const drawerModel = ref({
	responsibleList: []
}) // form data
const editor = ref('') // 描述

const taskTitle = ref('')// 标题

const projectId = ref('')

const taskFrist = ref(false)

const drawerModel_old = ref({})

// 获取详情
watch(() => props.id, (props_id) => {
	if (props_id) {
		getDetails()
	} else {
		drawerModel.value = {
			responsibleList: []
		}
	}
}, {immediate: true})

var userInfo = tool.data.get("USER_INFO");

function getDetails() {
	taskFrist.value = true
	api.task.detail.get({taskId: props.id}).then(res => {
		if (!res.data) {
			return
		}

		drawerModel.value = res.data
		// if(drawerModel.value.feedback){
		// 	drawerModel.value.feedback = parseInt(drawerModel.value.feedback)
		// }
		drawerModel.value.responsibleList = [res.data.taskResponsibleInfo]
		drawerModel_old.value = JSON.parse(JSON.stringify(drawerModel.value))
		taskTitle.value = drawerModel.value.taskTitle
		projectId.value = drawerModel.value.projectId
		editor.value = drawerModel.value.taskDescription
		console.log(111111231)
		console.log(drawerModel.value)
		getComments()
		getSubTask()
	})
}

const infoTabModel = ref('2')


const setSelectCycleList = () => {
	let data = [{
		value: '1',
		label: '每天'
	}, {
		value: '7',
		label: '每周'
	}, {
		value: '15',
		label: '每半月'
	}, {
		value: '30',
		label: '每月'
	}, {
		value: '90',
		label: '每季度'
	}, {
		value: '180',
		label: '每半年'
	}, {
		value: '365',
		label: '每年'
	}/*, {
		value: '360',
		label: '长期'
	}*/]
	if (drawerModel.value.feedtype === '1') {
		return data.slice(0, -2);
	}
	return data
}




const dialogFile = ref(false)
const showDialogFile = () => {
	dialogFile.value = true
}


const emit = defineEmits(['close'])
const closeDrawer = () => {
	emit('close', false)
}


const shortcuts = [
	{
		text: '今天',
		value: new Date(),
	},
	{
		text: '明天',
		value: () => {
			const date = new Date()
			date.setTime(date.getTime() + 3600 * 1000 * 24)
			return date
		},
	},
	{
		text: '下周',
		value: () => {
			const date = new Date()
			date.setTime(date.getTime() + 3600 * 1000 * 24 * 7)
			return date
		},
	},
	{
		text: '长期',
		value: () => {
			const date = new Date()
			date.setTime(date.getTime() + 3600 * 1000 * 24 * 365 *10 )
			return date
		},
	},
]

const InputRef = ref(null)
const inputVisible = ref(false)

/**
 * 显示标签
 */
const showInput = () => {
	inputVisible.value = true
	nextTick(() => {
		InputRef.value.input.focus()
	})
}

const inputValue = ref('')

/**
 * 添加便签
 */
const addTagConfirm = () => {
	if (inputValue.value) {
		// drawerModel.value.label = []
		drawerModel.value.label.push(inputValue.value)
	}
	inputVisible.value = false
	inputValue.value = ''
}

/**
 *
 *
 * .
 * 删除标签
 * @param tag 标签
 */
const handleCloseTag = (tag) => {
	drawerModel.value.label.splice(drawerModel.value.label.indexOf(tag), 1)
}

const showMarkdown = ref(false)

/**
 * 保存更改描述
 */
const saveEditor = () => {
	showMarkdown.value = !showMarkdown.value
	drawerModel.value.taskDescription = editor.value
}

const titleInputRef = ref(null)

/**
 * 修改标题
 */
const taskTitleChange = () => {
	if (taskTitle.value === drawerModel.value.taskTitle) {
		return
	}
	if (!taskTitle.value) {
		taskTitle.value = drawerModel.value.taskTitle
		return
	}
	console.log('change')
	titleInputRef.value.blur()
	drawerModel.value.taskTitle = taskTitle.value
}


// 修改
watch([() => drawerModel.value, () => taskTitle.value], ([drawerModel_n, taskTitle_n], [drawerModel_o, taskTitle_o]) => {
	if (!drawerModel_n.taskTitle) {
		return
	}
	const isTask = drawerModel_n.taskTitle === taskTitle_o && drawerModel_n.taskTitle === taskTitle_n
	if (taskFrist.value) {
		taskFrist.value = false
		return
	}
	if (JSON.stringify(drawerModel_n) !== '{}' && isTask && taskTitle_n) {
		if (drawerModel_n.time && drawerModel_n.time.length > 0) {
			drawerModel_n.startTime = drawerModel_n.time[0]
			drawerModel_n.endTime = drawerModel_n.time[1]
		}

		let editData = JSON.parse(JSON.stringify(drawerModel_n))
		// 为修改子任务
		if (editChildTask.value.id) {
			editData = JSON.parse(JSON.stringify(editChildTask.value))
		}
		api.task.edit.post(editData).then(res => {
			getDetails()
			editChildTask.value = {id: ''}
		}).catch(error => {
			editChildTask.value = {id: ''}
			taskFrist.value = true
			drawerModel.value = JSON.parse(JSON.stringify(drawerModel_old.value))
		})
	}
}, {deep: true})


const activeName = ref('first')

/**
 * 获取评论列表
 */
const getComments = () => {
	api.comment.list.get({taskId: props.id}).then(res => {
		commentList.value = res.data
	})
}


/**
 * 发送评论
 */
const submitComment = () => {
	var userInfo = tool.data.get("USER_INFO");
	console.log(userInfo)
	if (commentText.value) {
		api.comment.add.post({
			commentText: commentText.value,
			userId: userInfo.id,
			taskId: props.id
		}).then(() => {
			commentText.value = ''
			getComments()
		})
	}
}

/**
 * 删除评论
 * @param row
 */
const delComment = (row) => {
	api.comment.delete.get({commentId: row.id}).then(() => {
		ElMessage({
			message: '删除成功',
			type: 'success',
		})
		getComments()
	})
}

/**
 * 设置头像名
 * @param name
 */
const setUserAvatar = (name) => {
	// 名字为3或者更多
	if (name.length > 2) {
		return name.substr(name.length - 2)
	}
	return name

}

const beforeRemoveFile = (file) => {
	return this.$confirm(`文件 ${file.name} 被移除后，若需恢复需要重新上传，是否确定移除？`)
}
const beforeAvatarUpload = (file) => {
	// const isJPG = file.type === '.xlsx, .xls'
	const isLt2M = file.size / 1024 / 1024 < 2

	// if (!isJPG) {
	// 	this.$message.error('上传头像图片只能是 JPG 格式!')
	// }
	if (!isLt2M) {
		this.$message.error('上传附件大小不能超过 2MB!')
	}
	return isLt2M
}

const fileData = ref([])
const handleChangeFile = (file, fileList) => {
	fileData.value = JSON.parse(JSON.stringify(fileList))

}

const onsubmitFile = () => {
	dialogFile.value = false
	if (fileData.value.length > 0) {
		const data = new FormData()
		data.append('taskId', props.id)
		let files = []
		fileData.value.map(file => {
			files.push(file.raw)
		})
		data.append('files', files)
		api.task.addFile.post(data)
	}
}


/* 当前是否为修改子任务 */
const editChildTask = ref({id: ''})

/**
 * 修改任务状态
 * @param item
 * @param status
 * @param editChild
 * @param isLeaderAndSuccess 只有领导才能点击已完成
 */
const setTaskStatus = (item, status, editChild, isLeaderAndSuccess) => {
	// if(isLeaderAndSuccess){
	// 	return
	// }
	item.status = status
	if (editChild) {
		editChildTask.value = JSON.parse(JSON.stringify(item))
	}

}

/**
 * 已选择负责人集合
 * @param userList
 * @return data
 */
const getSelectResponsible = (userList) => {
	drawerModel.value.taskResponsible = userList[0].id
	drawerModel.value.responsibleList = userList
}
const getSelectPerson = (userList) => {
	// drawerModel.value.taskResponsible = userList[0].id
	drawerModel.value.userList = userList
}

const delSelectPerson = (user) => {
	// drawerModel.value.userList = user
	let index = drawerModel.value.userList.indexOf(user)
	drawerModel.value.userList.splice(index, 1)
}

/**
 * 删除已选用户
 * @param user
 */
const delSelectUser = (user) => {
	let index = drawerModel.value.responsibleList.indexOf(user)
	drawerModel.value.responsibleList.splice(index, 1)
}
/**
 * 领导审批
 */
const examine = (id) => {
	ElMessageBox.confirm(
		'您确认要审批该任务吗？此操作不可撤销。',
		{
			confirmButtonText: '审批',
			cancelButtonText: '取消',
			type: 'warning',
			beforeClose
		}
	)

	async function beforeClose(action, instance, done) {
		if (action === 'confirm') {
			instance.confirmButtonLoading = true
			instance.confirmButtonText = '审批中...'
			const req = await api.task.examTask.get({taskId: id})
			if (req.code === 200) {
				done()
				instance.confirmButtonLoading = false
				drawer.value = false
			}

		} else {
			done()
		}
	}
}
/**
 * 领导驳回
 */
const rejectTask = (id) => {
	ElMessageBox.confirm(
		'您确认要驳回该任务吗？此操作不可撤销。',
		{
			confirmButtonText: '驳回',
			cancelButtonText: '取消',
			type: 'warning',
			beforeClose
		}
	)

	async function beforeClose(action, instance, done) {
		if (action === 'confirm') {
			instance.confirmButtonLoading = true
			instance.confirmButtonText = '驳回中...'
			const req = await api.task.rejectTask.get({taskId: id})
			if (req.code === 200) {
				done()
				instance.confirmButtonLoading = false
				drawer.value = false
			}

		} else {
			done()
		}
	}
}

// 子任务
const filterTag = (value, row, colum) => {
	return row.status === value
}
const tableData = ref([])
// 新建子任务

const start1 = moment(new Date()).format("YYYY-MM-DD");
const form = ref({
	projectId: '',
	taskTitle: '',
	taskType: '1',
	taskResponsible: '',//负责人id
	userList: [], //参与人列表
	responsibleList: [], //负责人列表
	startTime: start1,
	endTime: null,
	priority: '',
	label: [],
	taskDescription: '',
	status: '',
	priorityVe: false
})
const dialogAddForm = ref(false)
const addFormFef = ref(null)
const AddSubTask = () => {
	dialogAddForm.value = true
}

const getSubTask = () => {
	tableData.value = drawerModel.value.subTaskList
	// api.taskSub.list.get({taskId: props.id}).then(res => {
	// 	tableData.value = res.data
	// 	console.log(tableData.value)
	// })
}


const getPriorityColor = (status) => {

	switch (status) {
		case '1':
			return '';
		case '2':
			return 'warning';
		case '3':
			return 'danger';
		default:
			return '';
	}
}
const getPriorityLabel = (status) => {

	switch (status) {
		case '1': // 对应进行中
			return '一级';
		case '2': // 对应挂起
			return '二级';
		case '3': // 对应已完成
			return '三级';
		default:
			return '四级';
	}
}
const rules = reactive({
	taskTitle: [
		{required: true, trigger: 'blur'}
	],
	taskType: [
		{
			required: false,
			trigger: 'change'
		},
	],
	priority: [
		{
			required: true,
			trigger: 'change'
		},
	],
	label: [
		{
			required: false,
			trigger: 'change'
		},
	],
	responsibleList: [
		{
			required: true,
			trigger: 'change'
		}
	],
	taskDescription: [
		{
			required: false,
			trigger: 'change'
		},
	],
	status: [
		{
			required: false,
			trigger: 'change'
		},
	],
	priorityVe: [
		{
			required: false,
			trigger: 'change'
		},
	],
	endTime: [
		{
			type: 'date',
			required: true,
			trigger: 'change'
		},
	],
})

const pickerOptions0 = (time) => {
	// 不能选择之前的时间 || 不可跨年
	if (time.getTime() < Date.now() - 8.64e7) {
		return true;
	} else {
		return false;
	}
}

/* 是否为领导 */
const isLeader = ref()
isLeader.value = parseInt(tool.data.get("USER_INFO").isLeader);

const childDrawer = ref(false)

const childDrawerId = ref('')

/* 子任务行点击 */
const childTableRowClick = (row) => {
	childDrawerId.value = row.id
	childDrawer.value = true
}
/* 关闭子嵌套dialog*/
const closeTaskDetails = (status) => {
	childDrawer.value = status
	childDrawerId.value = ''
	getDetails()
}

/* 设置dialog width */
const setDialogWidth = () => {
	if (props.noneInfo) {
		return '40%'
	}
	if (props.appendToBody) {
		return '70%'
	}

	return '80%'
}

var userInfo = tool.data.get("USER_INFO");
var isChangshang = userInfo.role.includes('manufacturer')

/*是否是员工*/
var isStaff = userInfo.role.includes('employee')

const route = useRoute()

/* 设置是否禁用编辑内容 */
const setInfoDisabled = () => {
	// /* 任务状态是已完成 || 厂商 */
	// if (drawerModel.value.status === 1 || isChangshang) {
	if (isChangshang) {
		return true
	}
	/* 不是领导 */
	if (!isLeader.value) {
		/* 员工并且常规工作，可以修改自己任务*/
		if (isStaff && route.name === 'regular' &&  Boolean(drawerModel.value.myTaskFlag)) {
			return false
		}
		/*不是嵌套（员工查看子任务详情）*/
		if (!props.appendToBody) {
			return !drawerModel.value.parentTaskId
		}

	}
}

/* 验收 */
const urgentProcessingClick = () => {
	setTaskStatus(drawerModel.value, 1, null,)
}

/* 是否显示验收按钮 */
const showCheckAccept = (data) => {
	if (data.status !== 1 && data.taskDescription === '1') {
		if (isLeader.value) {
			// 领导不能验收子任务，只能验收父任务 !props.appendToBody &&
			return !data.parentTaskId
		} else if (props.appendToBody || (data.parentTaskId && !isChangshang)) {
			// 只有员工和领导才有嵌套，所以该条件只有员工才能满足，为员工可验收子任务
			return true
		}
	}
}

/* 要求反馈周期切换类型 */
const feedtypeChange = () => {
	if (drawerModel.value.feedtype === '1') {
		/*if (drawerModel.value.feedcycle === '30' || !drawerModel.value.feedcycle) {
			drawerModel.value.feedcycle = '1'
		}*/
		drawerModel.value.feedback = '1'
	} else {
		drawerModel.value.feedback = ''
	}
}

const selectFrequencyList = () => {
	// if (form.value.feedback !== '30') {
	return 360
	// }
}

const setFrequencyLabel = (option) => {
	const data = {
		'1': '天',
		'7': '周',
		'15': '半月',
		'30': '月',
		'90': '季度',
		'180': '半年',
		'365': '年',
		/*'360': '长期'*/
	}
	return option + data[drawerModel.value.feedcycle]
}

const weekOptions = [{
	value: '1',
	label: '星期一'
}, {
	value: '2',
	label: '星期二'
}, {
	value: '3',
	label: '星期三'
}, {
	value: '4',
	label: '星期四'
}, {
	value: '5',
	label: '星期五'
}, {
	value: '6',
	label: '星期六'
}, {
	value: '7',
	label: '星期日'
}
]
const twoweekOptions = [{
	value: '1',
	label: '第一天'
}, {
	value: '2',
	label: '第二天'
}, {
	value: '3',
	label: '第三天'
}, {
	value: '4',
	label: '第四天'
}, {
	value: '5',
	label: '第五天'
}, {
	value: '6',
	label: '第六天'
}, {
	value: '7',
	label: '第七天'
}, {
	value: '8',
	label: '第八天'
}, {
	value: '9',
	label: '第九天'
}, {
	value: '10',
	label: '第十天'
}, {
	value: '11',
	label: '第十一天'
}, {
	value: '12',
	label: '第十二天'
}, {
	value: '13',
	label: '第十三天'
}, {
	value: '14',
	label: '第十四天'
}, {
	value: '15',
	label: '第十五天'
}
]
const mouthOptions = [{
	value: '1',
	label: '1号'
}, {
	value: '2',
	label: '5号'
}, {
	value: '3',
	label: '10号'
}, {
	value: '4',
	label: '15号'
}, {
	value: '5',
	label: '20号'
}, {
	value: '6',
	label: '25号'
}, {
	value: '7',
	label: '30号'
}
]
const seasonOptions = [{
	value: '1',
	label: '季度第一天'
}, {
	value: '2',
	label: '季度第十天'
}, {
	value: '3',
	label: '季度第三十天'
}, {
	value: '4',
	label: '季度第四十五天'
}, {
	value: '5',
	label: '季度第六十天'
}, {
	value: '6',
	label: '季度最后十天'
}, {
	value: '7',
	label: '季度最后五天'
}, {
	value: '8',
	label: '季度最后一天'
}
]
const longOptions = [{
	value: '1',
	label: '每周'
}, {
	value: '2',
	label: '每半月'
}, {
	value: '3',
	label: '每月'
}, {
	value: '4',
	label: '每季度'
}, {
	value: '5',
	label: '每半年'
}, {
	value: '6',
	label: '每年'
}
]

const feedcycleChange = () => {
	drawerModel.value.feedback = '1'
}

const closeDialog = () => {
	dialogAddForm.value = false
	getDetails()
}

const addUserPopoverRef = ref()

const selectUser = ()=>{
	if(!setInfoDisabled()) {
		addUserPopoverRef.value.showDialog()
	}
}

const showChangeType = (data)=>{
	if(isLeader.value && route.name === 'regular' && data.taskType === '2') {
		return true
	}
}

const changeType = (data) =>{
	data.taskType = '1'
}

const showUrgentProcessing = (data)=>{
	return !isLeader.value && data.status !== 1 && data.myTaskFlag && !(data.status !== 1 && data.taskDescription === '1') && route.name === 'keynote'
}

const setUrgentProcessing = (data)=>{
	ElMessageBox.confirm(
		'您确认要申请验收该任务吗？',
		{
			confirmButtonText: '申请验收',
			cancelButtonText: '取消',
			type: 'warning',
			beforeClose
		}
	)

	async function beforeClose(action, instance, done) {
		if (action === 'confirm') {
			instance.confirmButtonLoading = true
			instance.confirmButtonText = '申请验收中...'
			data.taskDescription = '1'
			data.status = '0'
			done()
			// const req = await api.task.waitingTask.get({taskId: data.id})
			// if (req.code === 200) {
			// 	done()
			// 	instance.confirmButtonLoading = false
			// 	getTaskList()
			// }

		} else {
			done()
		}
	}
}
</script>

<template>
	<el-dialog
		v-model="drawer"
		direction="btt"
		:width="setDialogWidth()"
		class="task-details-dialog task-info-dialog"
		:append-to-body="appendToBody"
		@close="closeDrawer"
	>
		<template #header>
			<div>
				<!--				<el-tag class="ml-2" style="font-size: 20px;">{{ drawerModel.taskType === '1'?'事务':'任务' }}</el-tag>-->
				<!--				<el-divider direction="vertical"/>-->
				<span style="font-weight: normal;font-size: 18px;"
					  v-if="drawerModel.projectName">{{ drawerModel.projectName }}</span>
			</div>
		</template>
		<div class="details-drawer-body" :class="flexColumn?'details-drawer-body_isCS':'' ">
			<div v-if="!noneInfo">
				<div class="details-wrap">
					<img
						v-if="drawerModel.status !== 1 && drawerModel.taskDescription === '1' "
						src="@/assets/urgentProcessing.png"
						class="urgentProcessing-img task-urgentProcessing-img"
						alt=""
					>
					<div class="detail-change-btns">
						<el-button
							v-if="showCheckAccept(drawerModel) "
							class=" task-urgentProcessing-btn"
							type="danger"
							@click="urgentProcessingClick()"
						>
							验收
						</el-button>
						<el-button
							v-if="showChangeType(drawerModel) "
							class=" task-urgentProcessing-btn task-changeType-btn"
							type="danger"
							@click="changeType(drawerModel)"
						>
							变更为重点工作
						</el-button>
						<el-button
							v-if="showUrgentProcessing(drawerModel) "
							class=" task-urgentProcessing-btn task-changeType-btn"
							type="primary"
							@click="setUrgentProcessing(drawerModel)"
						>
							申请验收
						</el-button>
					</div>
					<div class="details-wap-input">
						<el-input
							ref="titleInputRef"
							v-model="taskTitle"
							class="w-50 m-2 not-border"
							placeholder="输入标题"
							type="textarea"
							show-word-limit
							:maxlength="500"
							:autosize="{ minRows: 1, maxRows: 20}"
							size="large"
							:readonly="setInfoDisabled()"
							@change="taskTitleChange"
						/>

					</div>

				</div>
				<div class="details-wrap">
					<div>
						<div class="details-wrap-title">优先级：</div>
						<el-select
							v-model="drawerModel.priority"
							placeholder="请选择优先级"
							class="not-border-select  select-input"
							:disabled="setInfoDisabled()">
							<el-option
								v-for="option in selectPriorityList"
								:key="option.label"
								:label="option.label"
								:value="option.value">
								{{ option.label }}
							</el-option>
						</el-select>
						<!--									</el-form-item>-->
						<!--								</el-col>-->
						<!--							</el-row>-->
						<!--						</el-form>-->
					</div>
					<!--					状态 -->
					<div>
						<el-icon color="#F56C6C" size="37" v-if="taskStatusList[drawerModel.status]">
							<el-icon :color="taskStatusList[drawerModel.status].color">
								<component :is="taskStatusList[drawerModel.status].icon"/>
							</el-icon>
						</el-icon>
						<div class="operation-content task-status"
							 v-if="taskStatusList[drawerModel.status] && taskStatusList[drawerModel.status].length !==0">
							<!--							:disabled=" (appendToBody && isLeader) ||  setInfoDisabled()"-->
							<el-popover placement="right" :width="200" trigger="click" disabled>
								<template #reference>
									<div>{{ taskStatusList[drawerModel.status].name }}</div>
									<div>当前状态</div>
								</template>
								<div>
									<!--													状态列表-->
									<div v-for="(btn, btnIndex) in taskStatusList"
										 :key="btn.type"
										 class="taskStatus-popover"
										 :style="taskStatusList[drawerModel.status].type === btn.type?'background: aliceblue;':''"
										 @click="setTaskStatus(drawerModel, btnIndex, null, !isLeader && btn.status === 1)"
									>
										<el-button
											:disabled="!isLeader && btn.status === 1"
											:icon="btn.icon"
											:type="btn.type"
											round
											size="small"
										>{{ btn.name }}
										</el-button>
									</div>
								</div>
							</el-popover>
						</div>
					</div>
					<div>
						<div class="select-user-avatar">
							<div class="select-user">
								<div class="select-user-list">
									<div v-for="user in drawerModel.responsibleList"
										 :key="user.id"
										 class="user-avatar select-user-avatar"
									>
										<el-tooltip :content="user.orgName+' '+user.cn" effect="light" placement="top">
											<div>
												<el-avatar :size="28" @click="selectUser">{{
														user.cn.substring(user.cn.length - 2)
													}}
												</el-avatar>
												<!--												<el-avatar :size="28" class="del-user" @click="delSelectUser(user)">-->
												<!--													<el-icon color="red">-->
												<!--														<Delete/>-->
												<!--													</el-icon>-->
												<!--												</el-avatar>-->
											</div>
										</el-tooltip>
									</div>
								</div>
								<AddUserPopover
									ref="addUserPopoverRef"
									:size="0"
									none
									:select="drawerModel.responsibleList"
									@submit="getSelectResponsible"/>
							</div>
						</div>
						<div class="operation-content">
							<div
								v-if="drawerModel.responsibleList.length>0"
								@click="selectUser"
								:class="!setInfoDisabled()? 'edit-selectUser':'' "
							>
								{{ drawerModel.responsibleList[0].cn }}
							</div>
							<div>负责人</div>
						</div>
					</div>
				</div>
				<div class="details-wrap">
					<div>
						<div class="operation-content operation-content-time">
							<div>
								<div>
									要求完成时间：
								</div>
								<el-date-picker
									v-model="drawerModel.endTime"
									:shortcuts="shortcuts"
									placeholder="反馈时间"
									class="not-border-select-time"
									type="date"
									value-format="YYYY-MM-DD"
									:disabled-date="pickerOptions0"
									style="font-size: 18px;"
									:readonly="setInfoDisabled()"
								/>
							</div>
						</div>
					</div>
					<div>
						<div class="operation-content">
							<div>
								<div>
									要求反馈周期：
									<el-radio-group v-model="drawerModel.feedtype" size="small" class="form-label-radio"
													@change="feedtypeChange" :disabled="setInfoDisabled()">
										<el-radio-button label="0">默认</el-radio-button>
										<el-radio-button label="1">自定义</el-radio-button>
									</el-radio-group>
								</div>
								<el-select
									v-model="drawerModel.feedcycle"
									placeholder="请选择"
									:style="drawerModel.feedtype === '1'?'width:60px;':''"
									class="not-border-select select-input"
									@change="feedcycleChange"
									:disabled="setInfoDisabled()"
								>
									<el-option
										v-for="option in setSelectCycleList()"
										:key="option.label"
										:label="option.label"
										:value="option.value">
										{{ option.label }}
									</el-option>
								</el-select>
								<div v-if="drawerModel.feedtype === '1' " class="feedType1-main">
									<el-select
										v-if="drawerModel.feedcycle === '1' "
										v-model="drawerModel.feedback"
										placeholder="请选择自定义时段（天）"
										class="not-border-select select-input"
										:disabled="setInfoDisabled()"
									>
										<el-option
											v-for="option in selectFrequencyList()"
											:key="option + ''"
											:label="setFrequencyLabel(option)"
											:value="option + ''">
										</el-option>
									</el-select>
									<el-select
										v-if="drawerModel.feedcycle === '7' "
										v-model="drawerModel.feedback"
										placeholder="请选择自定义时段（星期）"
										class="not-border-select select-input feedType1-select"
										:disabled="setInfoDisabled()"
									>
										<el-option
											v-for="option in weekOptions"
											:key="option.value"
											:label="option.label"
											:value="option.value">
										</el-option>
									</el-select>
									<el-select
										v-if="drawerModel.feedcycle === '15' "
										v-model="drawerModel.feedback"
										placeholder="请选择自定义日期（天）"
										class="not-border-select select-input feedType1-select"
										:disabled="setInfoDisabled()"
									>
										<el-option
											v-for="option in twoweekOptions"
											:key="option.value"
											:label="option.label"
											:value="option.value">
										</el-option>
									</el-select>
									<el-select
										v-if="drawerModel.feedcycle === '30' "
										v-model="drawerModel.feedback"
										placeholder="请选择自定义日期（天）"
										class="not-border-select select-input feedType1-select"
										:disabled="setInfoDisabled()"
									>
										<el-option
											v-for="option in mouthOptions"
											:key="option.value"
											:label="option.label"
											:value="option.value">
										</el-option>
									</el-select>
									<el-select
										v-if="drawerModel.feedcycle === '90' "
										v-model="drawerModel.feedback"
										placeholder="请选择自定义时段（季度）"
										class="not-border-select select-input feedType1-select"
										:disabled="setInfoDisabled()"
									>
										<el-option
											v-for="option in seasonOptions"
											:key="option.value"
											:label="option.label"
											:value="option.value">
										</el-option>
									</el-select>
<!--									<el-select
										v-if="drawerModel.feedcycle === '360' "
										v-model="drawerModel.feedback"
										placeholder="请选择自定义日期（长期）"
										class="not-border-select select-input feedType1-select"
										:disabled="setInfoDisabled()"
									>
										<el-option
											v-for="option in longOptions"
											:key="option.value"
											:label="option.label"
											:value="option.value">
										</el-option>
									</el-select>-->
								</div>
							</div>
						</div>
					</div>
					<div>
						<div class="operation-content">
							<div>
								<div>
									创建时间：
								</div>
								<el-date-picker
									readonly
									v-model="drawerModel.startTime"
									:shortcuts="shortcuts"
									placeholder="开始日期"
									class="not-border-select-time"
									type="date"
									value-format="YYYY-MM-DD"
									style="font-size: 18px;"
								/>
							</div>
						</div>
					</div>
				</div>
<!--			厂商展示父任务	-->
				<div v-if="isChangshang" class="father-info">
					<div>
						<div>上级任务信息</div>
						<div>{{ drawerModel.parentResponsible }}</div>
					</div>
					<div>{{ drawerModel.parentTitle }}</div>
				</div>
				<el-tabs v-model="infoTabModel" class="demo-tabs">
					<el-tab-pane name="2" v-if="!noneChildInfo">
						<template #label>
								<span class="custom-tabs-label">
									<el-icon size="16"><Document/></el-icon>
									<span>子任务</span>
								</span>
						</template>
					</el-tab-pane>
				</el-tabs>
				<!--任务信息 -->
				<!--				<div v-if="infoTabModel === '1'">
									<div>
										<span>共 0 个附件</span>
										<el-button
											:icon="Plus"
											bg
											style="float: right"
											text
											@click="showDialogFile"
										>添加附件
										</el-button>
										<el-dialog
											v-model="dialogFile"
											width="60%"
										>
											<el-upload
												ref="my-upload"
												:auto-upload="false"
												:before-remove="beforeRemoveFile"
												:before-upload="beforeAvatarUpload"
												:limit="1"
												:multiple="false"
												:on-change="handleChangeFile"
												accept=".doc, .docx, .xls, .xlsx"
												action="#"
												class="upload-demo"
												drag
												name="213123"
											>
												<el-icon class="el-icon&#45;&#45;upload">
													<upload-filled/>
												</el-icon>
												<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
												<template #tip>
													<div class="el-upload__tip">
														只能上传.doc/.docx文件，且不超过500kb
													</div>
												</template>
											</el-upload>
											<template #footer>
											  <span class="dialog-footer">
												<el-button text @click="dialogFile = false">取消</el-button>
												<el-button type="primary" @click="onsubmitFile">
												  确定
												</el-button>
											  </span>
											</template>
										</el-dialog>
									</div>
									<el-empty description="没有数据"/>
								</div>-->
				<div v-if="infoTabModel === '2' && !noneChildInfo">
					<div>
						<el-button
							v-if="!isLeader && (String(drawerModel.status) === '0' || String(drawerModel.status) === '3') && Boolean(drawerModel.myTaskFlag)"
							:icon="Plus"
							class="add-btn set-font-size"
							type="primary"
							@click="AddSubTask"
						>
							分派
						</el-button>
						<el-table :data="tableData" stripe style="width: 100%" @row-click="childTableRowClick"
								  row-class-name="child-table-row">
							<el-table-column type="index" width="50" align="center" label="序号"/>
							<el-table-column prop="taskTitle" label="任务"/>
							<el-table-column prop="responsibleName" label="负责人" align="center"/>
							<el-table-column prop="startTime" label="派发时间" align="center"/>
							<el-table-column prop="endTime" label="反馈时间" align="center"/>
							<el-table-column prop="priority" label="优先级" align="center" width="68">
								<template #default="scope">
									<el-tag
										:type="getPriorityColor(scope.row.priority)"
										disable-transitions
									>{{ getPriorityLabel(scope.row.priority) }}
									</el-tag>
								</template>
							</el-table-column>
							<el-table-column align="center" width="68">
								<template #default="scope">
									<div class="urgentProcessing-main">
										<img
											v-if="scope.row.status !== 1 && scope.row.taskDescription === '1' "
											src="@/assets/urgentProcessing.png"
											class="urgentProcessing-img"
											alt=""
										>
									</div>
								</template>
							</el-table-column>
							<el-table-column
								prop="status"
								label="状态"
								width="80"
								align="center"
								:filters="[
											{ text: '进行中', value: 0 },
											{ text: '已完成', value: 1 },
											{ text: '已超时', value: 3 },
											{ text: '待验收', value: 4 },
										  ]"
								:filter-method="filterTag"
								filter-placement="bottom-end"
							>
								<template #default="scope">
									<div class="operation-content task-status"
										 v-if="taskStatusList[scope.row.status] && taskStatusList[scope.row.status].length !==0">
										<el-popover placement="right" :width="200" trigger="click" disabled>
											<template #reference>
												<!--												<div>{{ // taskStatusList[scope.row.status].name }}</div>-->
												<el-tag
													class="child-table-status-tag"
													:type="taskStatusList[scope.row.status].type"
													disable-transitions
													effect="dark"
													round
													@click.stop
												>
													{{ taskStatusList[scope.row.status].name }}
												</el-tag>
											</template>
											<div>
												<!--													状态列表-->
												<div v-for="(btn, btnIndex) in taskStatusList"
													 :key="btn.type"
													 class="taskStatus-popover"
													 :style="taskStatusList[scope.row.status].type === btn.type?'background: aliceblue;':''"
													 @click="(scope.row, btnIndex, 'isChild')"
												>
													<el-button
														:class="btn.status === 1? 'task-success-btn':''"
														:icon="btn.icon"
														:type="btn.type"
														round
														size="small"
													>{{ btn.name }}
													</el-button>
												</div>
											</div>
										</el-popover>
									</div>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</div>
			</div>
			<div class="details-drawer-body-right">
				<el-tabs v-model="activeName" class="demo-tabs">
					<el-tab-pane label="进展" name="first">
					</el-tab-pane>
				</el-tabs>
				<div class="details-right-tabs-body">
					<el-container>
						<el-header>
							<div class="details-comment-info">
								<el-empty v-if="commentList.length === 0" description="空"/>
								<div v-else v-for="i in commentList" :key="i">
									<el-avatar :size="32">{{ setUserAvatar(i.commentName) }}</el-avatar>
									<div>
										<div class="details-comment-user">
											<span>{{ i.commentName }}</span>
											<span class="details-comment-user-time">{{ i.createTime }}</span>
											<!--											<el-button-->
											<!--												v-if="!noneCommentInput"-->
											<!--												class="RMK-del-btn"-->
											<!--												icon="Delete"-->
											<!--												link-->
											<!--												type="danger"-->
											<!--												@click="delComment(i)"-->
											<!--											/>-->
										</div>
										<div class="details-comment-text">{{ i.commentText }}</div>
									</div>
								</div>
							</div>
						</el-header>
						<el-main v-if="isLeader || (!noneCommentInput && Boolean(drawerModel.myTaskFlag))">
							<!--							v-if="!noneInfo && !isLeader" -->
							<div class="details-comment">
								<el-input
									v-model="commentText"
									:autosize="{ minRows: 4, maxRows: 6 }"
									:maxlength="500"
									placeholder="进展内容"
									resize="none"
									show-word-limit
									type="textarea"
								/>
								<div>
									<el-button size="small" type="primary" @click="submitComment">发送</el-button>
								</div>
							</div>
						</el-main>
					</el-container>

				</div>
			</div>
		</div>
		<!--		<div>-->
		<!--			<div v-if="isExamineDetail === '1' && drawerModel.status=== 2 " class="examine_rejectTask">-->
		<!--				<el-button type="primary" @click="examine(drawerModel.id)">-->
		<!--					审批-->
		<!--				</el-button>-->
		<!--				<el-button type="primary" @click="rejectTask(drawerModel.id)">-->
		<!--					驳回-->
		<!--				</el-button>-->
		<!--			</div>-->
		<!--		</div>-->
		<!--		<el-dialog-->
		<!--			v-model="drawer"-->
		<!--			direction="btt"-->
		<!--			:width="noneInfo ? '40%' : '80%'"-->
		<!--			class="task-details-dialog"-->
		<!--			@close="closeDrawer"-->
		<!--			append-to-body-->
		<!--		>-->
		<!-- 新建子任务 -->
		<AddTaskDialog
			:dialogAddForm="dialogAddForm"
			:project-id="projectId"
			:parent-task-id="props.id"
			:append-to-body="true"
			@close="closeDialog"
		/>
		<!--	嵌套子任务		-->
		<TaskDetails
			:id="childDrawerId"
			:show-drawer="childDrawer"
			append-to-body
			flex-column
			none-child-info
			none-comment-input
			@close="closeTaskDetails"
		/>
		<!--		</el-dialog>-->
	</el-dialog>
</template>

<style lang="scss" scoped>


.user-content {
	display: flex;

	.select-user-list111 {
		display: flex;
	}
}

.examine_rejectTask {
	position: absolute;
	left: 50%;
}

.details-drawer-body {
	font-size: 18px;
	display: flex;
	height: 100%;
	margin: 0 1%;
	overflow: hidden;

	> div {
		&:first-child {
			flex: 1;
			padding: 5px 30px 5px 0;
			height: 100%;
			overflow-y: auto;
		}
	}

	.details-drawer-body-right {
		width: 30%;
		border-left: 1px solid #f0f3fa;
		padding: 5px 10px;

		.details-right-tabs-body {
			height: calc(100% - 54px);

			.el-header {
				flex: 1;
				min-height: calc(100% - 174px);
				display: block;
			}
		}
	}
}

.details-drawer-body_isCS {
	display: block;
	overflow: auto;

	> div:first-child {
		height: auto;
		padding: 0;
	}

	.details-drawer-body-right {
		width: 100%;
		height: calc(100% - 269px);
		border: 1px solid #f0f3fa;
	}
}

.details-wrap {
	display: flex;
	justify-content: space-between;
	margin: 16px 0;
	padding: 0 10px;

	> div {
		display: flex;
		align-items: center;
		min-width: 195px;
		flex-shrink: 0;

		.operation-content {
			text-align: center;
			margin-left: 6px;

			> div {
				&:last-child {
					font-size: 12px;
					color: #999999;
					text-align: left;
				}

				&:first-child {
					font-size: 18px;
				}
			}
		}

		.operation-content-time {
			margin-left: 0;
		}

		.task-status {
			cursor: pointer;
		}
	}

	.details-wrap-title {
		color: #999999;
	}
}

.details-describe-title {
	color: var(--el-text-color-regular);
	margin-bottom: 16px;

	.markdown-btn {
		float: right;
	}
}

.details-describe-footer {
	margin-top: 10px !important;
	text-align: right;
}

.details-tags {
	margin-right: 10px;
}

.details-info-footer {
	padding-top: 15px;
	font-size: 12px;
	color: #aaa;

	.el-avatar {
		margin-right: 8px;
		font-size: 12px;
	}
}

.demo-tabs > .el-tabs__content {
	padding: 32px;
	color: #6b778c;
	font-size: 32px;
	font-weight: 600;
}

.demo-tabs .custom-tabs-label .el-icon {
	vertical-align: middle;
}

.demo-tabs .custom-tabs-label span {
	vertical-align: middle;
	margin-left: 4px;
}

.user-avatar {
	> div {
		position: relative;

		&:hover {

			.del-user {
				display: unset;
				position: absolute;
				right: 0px;
				bottom: 0px;
				background: rgba(16, 16, 16, 0.39);
				top: 0px;
			}
		}

		.del-user {
			display: none;

			> i {
				top: 5px;
			}
		}
	}
}

.details-comment-info {
	height: calc(100%);
	overflow-y: auto;

	> div {
		display: flex;
		padding: 15px 0 10px 0;
		position: relative;

		> div {
			flex: 1;
			flex-shrink: 0;
		}

		.RMK-del-btn {
			display: none;
			float: right;
		}

		&:hover {
			.RMK-del-btn {
				display: unset;
				position: absolute;
				top: 19px;
				right: 0;
			}
		}
	}

	.el-avatar {
		font-size: 12px;
		margin-right: 10px;
		flex-shrink: 0;
	}

	.details-comment-user {
		margin-bottom: 5px;

		> span {
			margin-right: 10px;
			font-size: 14px;
		}

		.details-comment-user-time {
			color: #aaa;
			font-size: 12px;
		}
	}

	.details-comment-text {
		background: #F5F5F5;
		padding: 10px;
		border-radius: 0 10px 10px 10px;
		position: relative;
		width: 98%;
		font-size: 15px;
		white-space: pre-line;
	}
}

.details-comment {
	//border: 1px solid #f0f3fa;
	border-right: 0;
	border-left: 0;
	//padding: 18px 0;

	> div {
		margin-top: 10px;
		text-align: right;
	}
}

.tag-main {
	display: flex;
	align-items: center;

	.tag-input {
		width: 100px;
		margin-right: 10px
	}
}

.not-border {
	--el-input-border-color: #fff;
	font-size: 18px;
}

.time-main {
	display: flex;
	justify-content: space-between;

	div {
		flex: 1;
	}
}

.details-wap-input {
	flex: 1;
	padding-right: 10px;
}

.child-table-status-tag {
	cursor: pointer;
}


.task-urgentProcessing-img {
	top: 9px;;
	height: 80px;
}

.detail-change-btns {
	position: absolute;
	top: 20px;
	left: 46px;
}

.task-urgentProcessing-btn {
	top: 24px;
	left: 55px;
	height: 40px;
	width: 70px;
	font-size: 18px;
}

.task-changeType-btn {
	width: 150px;
}

.feedType1-main {
	display: inline-block;
	width: calc(100% - 150px);
	margin-left: 10px;
}

.father-info {
	font-size: 12px;
	padding: 10px 10px;
	background: #eef6ff;
	border-radius: 4px;
	border-left: 4px solid #409eff;

	> div:first-child {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-weight: bold;
		margin-bottom: 3px;

		> div:last-child {
			background: #d9d9d9;
			padding: 0 5px;
			border-radius: 4px;
			font-weight: unset;
		}
	}
}

.edit-selectUser {
	height: 26px;
	border: 1px solid transparent;

	&:hover {
		border: 1px solid var(--el-border-color-hover);
		border-radius: 4px;
		width: 78px;
		text-align: left;
		cursor: pointer;
	}
}
</style>
<style scoped>
.details-wap-input >>> .el-input--large .el-input__wrapper {
	padding: 0;
}

.details-comment >>> .el-textarea__inner {
	box-shadow: none;
}

>>> .el-date-editor.el-input__wrapper {
	box-shadow: none;
	border: 1px dashed #c1c2c3;
}

>>> .el-date-editor.el-input__wrapper:hover {
	border: 1px dashed #409eff;
	cursor: pointer;
}

.not-border-select {
	width: 115px;
}

.select-input >>> .el-input {
	font-size: 18px;
}

.not-border-select >>> .el-input {
	--el-input-border-color: #fff;
}

.not-border-select >>> .el-input__suffix {
	display: none;
}

.not-border-select:hover >>> .el-input__suffix {
	display: unset;
}

.operation-content >>> .el-input__wrapper {
	padding: 0;
}

>>> .el-input.is-disabled .el-input__wrapper {
	background-color: #fff;
	box-shadow: unset;
}

>>> .el-input.is-disabled .el-input__inner {
	-webkit-text-fill-color: var(--el-input-text-color, var(--el-text-color-regular));
}

>>> .child-table-row {
	cursor: pointer;
}
</style>
<style>
.taskStatus-popover .el-tooltip__trigger {
	font-size: 18px;
}

.not-border-select-time {
	--el-input-border-color: #fff;
	width: 175px !important;

}

.item-task-label .el-form-item__label {
	font-size: 18px;
}

.demo-tabs .el-tabs__item {
	font-size: 16px;
}
</style>
